<template>
	<div class="web-main">
		<div class="crumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/webMain' }">校园论坛</el-breadcrumb-item>
				<el-breadcrumb-item>首页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="carousel-wrap">
			<Carousel/>
		</div>
		<div class="wrap">
			<div class="main-part">
				<div class="recommend-part">
					<div class="part-head">推荐主题</div>
					<div class="part-list">
						<div class="part-item" v-for="(item, index) in recommendList" :key="index">
							<div class="title">{{ item.title }}</div>
							<div class="desc">{{ item.content }}</div>
							<div class="sub">
								<div class="left-sub">
									<span class="author">{{ item.author }}</span>
									<span class="date">{{ item.date }}</span>
								</div>
								<div class="right-sub">
									<span class="visit"><i class="el-icon-view"></i>{{ item.visitNum }}</span>
									<span class="comment"><i class="el-icon-chat-dot-square"></i>{{ item.commentNum }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sub-part">
				<div class="hot-part">
					<div class="hot-head">热门主题</div>
					<div class="hot-list">
						<div class="hot-item" v-for="(item, index) in hotList" :key="index">
							<div class="ind" :class="item.class">{{ index+1 }}</div>
							<div class="title">{{ item.title }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Carousel from './carousel.vue';
export default {
	name: 'WebMain',
	components: {
		Carousel
	},
	data() { 
		return { 
			//基础地址
			baseUrl: process.env.VUE_APP_BASE_API,
			//推荐文章列表
			recommendList: [],
			//热门主题
			hotList: []
		}
	},
	mounted() { 
		this.queryRecommendData();
		this.queryHotData();
	},
	methods: {
		/**
		 * 查询推荐主题数据
		 */
		queryRecommendData() { 
			let dataList = [
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
				{
					id: 1,
					title: '台积电2025届招聘简章',
					content: '台积电2025届招聘简章 工作地点：上海/南京 台积电介绍 1987年，台积公司成立于台湾新竹科学园区，并开',
					date: '2025-01-17',
					author: '张三',
					visitNum: 1250,
					commentNum: 1
				},
			];
			this.recommendList = dataList;
		},
		/**
		 * 查询热门主题数据
		 */
		queryHotData() { 
			let dataList = [
				{ id: 1, title: '长沙高新区招聘简章', class: 'first' },
				{ id: 2, title: '【绿盟科技】2019年秋季校园招聘', class: 'second'  },
				{ id: 3, title: '咪咕音乐有限公司 2021 届秋季校园招聘 火热开启', class: 'third'  },
				{ id: 4, title: '恒生2018校园招聘宣讲会（武汉站）' },
				{ id: 5, title: '武汉大学传奇人物' },
				{ id: 6, title: '2018年中邮消费金融有限公司校园招聘简章' },
				{ id: 7, title: '与农信 共蝶变 ——浙江农信2019校园招聘正式启动' },
				{ id: 8, title: '我校2020年本科招生录取工作圆满结束' },
				{ id: 9, title: '“珞珈一号01星”项目获测绘科学技术特等奖' },
				{ id: 10, title: '长沙高新区招聘简章' },
			];
			this.hotList = dataList;
		}
	}
}
</script>

<style lang="scss" scoped>
.web-main {
	width: 100%;
	height: auto;
	.crumb {
		width: 1280px;
		margin: 0 auto;
		padding: 15px 0 20px 0;
	}
	.carousel-wrap {
		width: 1280px;
		margin: 0 auto;
	}
	.wrap {
		width: 1280px;
		height: auto;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}
	.main-part {
		width: calc(100% - 300px);
		padding-bottom: 50px;
		.recommend-part {
			width: 100%;
			border: 1px solid #eee;
			.part-head {
				width: 100%;
				padding: 5px 15px 5px 15px;
				background: #f0f4f0;
				color: #000;
				font-size: 14px;
				font-weight: 600;
			}
			.part-list {
				.part-item {
					padding: 15px;
					border-bottom: 1px solid #eee;
					&:last-child {
						border-bottom: 0;
					}
					.title {
						font-size: 14px;
						color: #2965B1;
						cursor: pointer;
						padding-bottom: 5px;
					}
					.desc {
						font-size: 14px;
						line-height: 28px;
						color: #666;
						width: 80%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.sub {
						height: 24px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						font-size: 12px;
						.author {
							color: #777;
							margin-right: 15px;
						}
						.date {
							color: #999;
						}
						.visit {
							color: #999;
							margin-right: 15px;
							> i {
								font-size: 14px;
								margin-right: 2px;
							}
						}
						.comment {
							color: #999;
							> i {
								font-size: 14px;
								margin-right: 2px;
							}
						}
					}
				}
			}
		}
	}
	.sub-part {
		width: 300px;
		.hot-part {
			width: 100%;
			padding-left: 15px;
			.hot-head {
				font-size: 14px;
				font-weight: bold;
				padding-bottom: 15px;
				border-bottom: 2px solid #c3d5c4;
			}
			.hot-list {
				width: 100%;
				.hot-item {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					.ind {
						font-size: 18px;
						width: 30px;
						font-style: italic;
						color: #999;
						&.first {
							color: #bc0614;
						}
						&.second {
							color: #ff6600;
						}
						&.third {
							color: #ffcc00;
						}
					}
					.title {
						width: calc(100% - 30px);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #2965B1;
					}
				}
			}
		}
	}
}
</style>